import React, { Component } from 'react'
import './index.less'
import { Row, Col, DatePicker, Table, Modal, Button, message } from 'antd'
import WeeklyForm1 from './weekForm1'
import WeeklyForm2 from './weekForm2'
import WeeklyForm3 from './weekForm3'
import WeeklyForm4 from './weekForm4'
import WeeklyForm5 from './weekForm5'
import moment from 'moment'
import Http from '../../../../axios'

export default class TeamWeekly extends Component {

  state = {
    userInfo: '',
    date: '',
    index1: 1,
    index2: 1,
    index3: 1,
    index4: 1,
    index5: 1,
    data1: [],
    modalVisible1: false,
    modifyRecord1: '',
    data2: [],
    modalVisible2: false,
    modifyRecord2: '',
    data3: [],
    modalVisible3: false,
    modifyRecord3: '',
    data4: [],
    modalVisible4: false,
    modifyRecord4: '',
    data5: [],
    modalVisible5: false,
    modifyRecord5: '',
    today: moment(new Date().getTime()),
    departmentList: [],
    managerList: []
  }

  componentWillMount() {
    this.setState({
      userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
      date: this.getWeek()
    })
    setTimeout(() => {
      this.getWeeklyDataArray();
      this.getDepartmentList();
      this.getManager();
    },0)
  }

  getDepartmentList = () => {
    Http.request({
      url: '/department/list'
    }).then((redData) => {
      this.setState({
        departmentList: redData.data
      })
    })
  }

  getManager = () => {
    Http.request({
      url: '/projectInfo/query/manager'
    }).then((resData) => {
      this.setState({
        managerList: resData.data
      })
    })
  }

  getWeek = () => {
    let str = new Date();
    let week = Math.ceil(str.getDate()/7);
    let month = str.getMonth() + 1;
    let year = str.getFullYear();
    if  (str.getDate() < 7) {
        if (str.getDay() !== 1) {
            week = 5;
            month = str.getMonth();
        }
    }
    return {year, month, week}
  }

  closeModal = (type) => {
    this.setState({
      [type]: false
    })
  }

  getWeeklyDataArray = () => {
    Http.request({
      url: `/projectInfo/query/date/${this.state.date.year}年${this.state.date.month}月第${this.state.date.week}周`
    }).then((resData) => {
      if (resData.data) {
        this.setIndex(resData.data.projectInfoVos);
        this.setIndex(resData.data.teamBuildings);
        this.setIndex(resData.data.teamTrainings);
        this.setIndex(resData.data.preResearchReportVos);
        this.setIndex(resData.data.feedbackReportVos);
        this.setState({
          fullWeeklyReportData: resData.data,
          data1: resData.data.projectInfoVos,
          data2: resData.data.teamBuildings,
          data3: resData.data.teamTrainings,
          data4: resData.data.preResearchReportVos,
          data5: resData.data.feedbackReportVos
        })
      }
    })
  }

  setIndex = (data) => {
    for (let i = 0; i < data.length; i++) {
      data[i].index = i + 1;
    }
  }
  submitModalData = (data, type) => {
    let url, postData;
    data.key = data.index;
    if (type.type1 === "data1") {
      data.date = moment(this.state.today).format('YYYY-MM-DD');
      data.deliveryPlan = moment(data.deliveryPlan).format('YYYY-MM-DD');
      let item = this.state.departmentList.find(item => item.name === data.delayDepartment);
      if (item) {
        data.delayDepartment = item.id;
      }
      let managerItem = this.state.managerList.find(item => item.name === data.manager)
      if (managerItem) {
        data.manager = managerItem.value;
      }
      if (this.state[[type.type2]] === '') {
        url = '/projectInfo/create';
      } else {
        url = '/projectInfo/update';
        data.id = this.state[type.type2].id;
      }
      postData = data;
    } else if (type.type1 === "data2") {
        data.type = "project";
        data.dateMonth = `${this.state.date.year}年${this.state.date.month}月`;
        data.finishTime = moment(data.finishTime).format('YYYY-MM-DD');
        if (this.state[[type.type2]] === '') {
          url = '/teamBuilding/create';
        } else {
          data.id = this.state[type.type2].id
          url = '/teamBuilding/update';
        }
        postData = data;
    } else if (type.type1 === "data3") {
        data.type = "project";
        data.dateMonth = `${this.state.date.year}年${this.state.date.month}月`;
        data.buildDate = moment(data.buildDate).format('YYYY-MM-DD');
        if (this.state[[type.type2]] === '') {
          url = '/teamTraining/create';
        } else {
          data.id = this.state[type.type2].id
          url = '/teamTraining/update';
        }
        postData = data;
    } else if (type.type1 === "data5") {
        data.deliveryDate = moment(data.deliveryDate).format('YYYY-MM-DD');
        data.year = `${this.state.date.year}`;
        if (this.state[[type.type2]] === '') {
          url = '/projectFeedbackReport/add';
        } else {
          data.id = this.state[type.type2].id
          url = '/projectFeedbackReport/update';
        }
        postData = data;
    } else if (type.type1 === "data4") {
        data.year = `${this.state.date.year}`;
        data.deliveryDate = moment(data.deliveryDate).format('YYYY-MM-DD');
        if (this.state[[type.type2]] === '') {
          url = '/projectPreResearchReport/create';
        } else {
          data.id = this.state[type.type2].id
          url = '/projectPreResearchReport/update';
        }
        postData = data;
    }
  
    Http.request({
      url: url,
      method: 'post',
      data: postData
    }).then((resData) => {
      message.success("提交成功");
    })
    this.setState({
      [type.type3]: false,
    })

    setTimeout(() => {
      this.getWeeklyDataArray();
    },500)
  }

  addData = (type) => {
    if (!this.state.today) {
      message.warn("请先选择时间段");
      return;
    }
    this.setState({
      [type.type3]: true,
      [type.type2]: ''
    })
    if (this.state[type.type1].length > 0) {
      this.setState({
        [type.type4]: this.state[type.type1][this.state[type.type1].length - 1].index + 1
      })
    }
  }
  modifyItem = (record, type) => {
    if (type.type1 === 'modifyRecord1') {
      record.deliveryPlan = moment(new Date(record.deliveryPlan).getTime());
    } else if (type.type1 === 'modifyRecord4' || type.type1 === 'modifyRecord5') {
      record.deliveryDate = moment(new Date(record.deliveryDate).getTime());
    } else if (type.type1 === 'modifyRecord2') {
      record.finishTime = moment(new Date(record.finishTime).getTime());
    } else if (type.type1 === 'modifyRecord3') {
      record.buildDate = moment(new Date(record.buildDate).getTime());
    }
    this.setState({
      [type.type1]: record,
      [type.type2]: true
    })
  }
  deleteItem = (record, type) => {
    let url;
    switch (type) {
      case 'data1':
        url = `/projectInfo/delete/${record.id}`
        break;
      case 'data2':
        url = `/teamBuilding/delete/${record.id}`
        break;
      case 'data3':
        url = `/teamTraining/delete/${record.id}`
        break;
      case 'data4':
        url = `/projectFeedbackReport/delete/${record.id}`
        break;
      default:
        url = `/projectPreResearchReport/delete/${record.id}`
        break;
    }
    Http.request({
      url: url,
      method: 'delete'
    }).then((resData) => {
      message.success('删除成功');
      setTimeout(() => {
        this.getWeeklyDataArray();
      },500)
    })
  }

  dateChange = (moment, string) => {
    this.setState({
      today: moment
    })
  }



  render() {
    const columns1 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        fixed: 'left',
        width: 100
      }, 
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 150
      }, 
      {
        title: '项目编号',
        dataIndex: 'projectOutCode',
        key: 'projectOutCode',
      }, 
      {
        title: '项目类型',
        dataIndex: 'projectType',
        key: 'projectType',
      }, 
      {
        title: 'Redmine是否建档',
        dataIndex: 'filing',
        key: 'filing',
        render: (text, record) => {
          switch (record.filing) {
            case true:
              return '是';
            default:
              return '否';
          }
        }
      }, 
      {
        title: '项目经理',
        dataIndex: 'manager',
        key: 'manager',
      }, 
      {
        title: '项目预计投入人力(人天)',
        dataIndex: 'hrPlan',
        key: 'hrPlan',
      }, 
      {
        title: '项目已经投入人力(人天)',
        dataIndex: 'hrAlready',
        key: 'hrAlready',
      }, 
      {
        title: '项目进度(%)',
        dataIndex: 'progress',
        key: 'progress',
      }, 
      {
        title: '项目预期交付时间',
        dataIndex: 'deliveryPlan',
        key: 'deliveryPlan',
        render: (text, record) => (
          moment(record.deliveryPlan).format('YYYY年MM月DD日')
        )
      }, 
      {
        title: '项目节点',
        dataIndex: 'notes',
        key: 'notes',
      }, 
      {
        title: '项目是否延期',
        dataIndex: 'delay',
        key: 'delay',
        render: (text, record) => {
          switch (record.filing) {
            case true:
              return '是';
            default:
              return '否';
          }
        }
      },
      {
        title: '项目延误节点',
        dataIndex: 'delayNote',
        key: 'delayNote',
      },
      {
        title: '项目延误责任部门',
        dataIndex: 'delayDepartment',
        key: 'delayDepartment',
      },
      {
        title: '项目延误原因',
        dataIndex: 'delayReason',
        key: 'delayReason',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width:150,
        fixed: 'right',
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => this.modifyItem(record, {type1: 'modifyRecord1', type2: 'modalVisible1'})}>修改</a>
            <span className="ant-divider" />
            <a onClick={() => this.deleteItem(record, 'data1')}>删除</a>
          </span> 
        )
      },
    ];
    const columns2 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '能力名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '期望效果',
        dataIndex: 'target',
        key: 'target',
      },
      {
        title: '完成情况',
        dataIndex: 'result',
        key: 'result',
      },
      {
        title: '完成时间',
        dataIndex: 'finishTime',
        key: 'finishTime',
        render: (text, record) => (
          moment(record.finishTime).format('YYYY年MM月DD日') 
        )
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width:150,
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => this.modifyItem(record, {type1: 'modifyRecord2', type2: 'modalVisible2'})}>修改</a>
            <span className="ant-divider" />
            <a onClick={() => this.deleteItem(record, 'data2')}>删除</a>
          </span> 
        )
      },
    ]
    const columns3 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '培训内容',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '培训目的',
        dataIndex: 'target',
        key: 'target',
      },
      {
        title: '培训时间',
        dataIndex: 'buildDate',
        key: 'buildDate',
        render: (text, record) => (
          moment(record.buildDate).format('YYYY年MM月DD日') 
        )
      },
      {
        title: '完成情况',
        dataIndex: 'result',
        key: 'result',
      },
      {
        title: '培训形式',
        dataIndex: 'trainingMethod',
        key: 'trainingMethod',
      },
      {
        title: '培训质量-考核成绩',
        dataIndex: 'grade',
        key: 'grade',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width:150,
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => this.modifyItem(record, {type1: 'modifyRecord3', type2: 'modalVisible3'})}>修改</a>
            <span className="ant-divider" />
            <a onClick={() => this.deleteItem(record, 'data3')}>删除</a>
          </span> 
        )
      },
    ]
    const columns4 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        fixed: 'left',
        width: 100
      }, 
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 150
      }, 
      {
        title: '项目编号',
        dataIndex: 'projectOutCode',
        key: 'projectOutCode',
      }, 
      {
        title: '项目经理',
        dataIndex: 'manager',
        key: 'manager',
      }, 
      {
        title: '项目预计投入人力(应用研发)',
        dataIndex: 'appHrPlan',
        key: 'appHrPlan',
      }, 
      {
        title: '项目预计投入人力(系统研发)',
        dataIndex: 'sysHrPlan',
        key: 'sysHrPlan',
      }, 
      {
        title: '项目预计投入人力(QA)',
        dataIndex: 'qaHrPlan',
        key: 'qaHrPlan',
      }, 
      {
        title: '项目实际投入人力(应用研发)',
        dataIndex: 'appHrReal',
        key: 'appHrReal',
      }, 
      {
        title: '项目实际投入人力(系统研发)',
        dataIndex: 'sysHrReal',
        key: 'sysHrReal',
      }, 
      {
        title: '项目实际投入人力(QA)',
        dataIndex: 'qaHrReal',
        key: 'qaHrReal',
      }, 
      {
        title: '项目交付时间',
        dataIndex: 'deliveryDate',
        key: 'deliveryDate',
        render: (text, record) => (
          moment(record.deliveryDate).format('YYYY年MM月DD日')
        )
      }, 
      {
        title: '项目交付时效',
        dataIndex: 'delay',
        key: 'delay',
      }, 
      {
        title: '技术难度',
        dataIndex: 'techDiff',
        key: 'techDiff',
      },
      {
        title: '技术文档质量',
        dataIndex: 'docQuality',
        key: 'docQuality',
      },
      {
        title: 'demo质量',
        dataIndex: 'demoQuality',
        key: 'demoQuality',
      },
      {
        title: '是否被产品采纳',
        dataIndex: 'accepted',
        key: 'accepted',
        render: (text, record) => {
          switch (record.accepted) {
            case true:
              return '是'
            default:
              return '否'
          }
        }
      },
      {
        title: '文档归档情况',
        dataIndex: 'archive',
        key: 'archive',
        render: (text, record) => {
          switch (record.accepted) {
            case true:
              return '是'
            default:
              return '否'
          }
        }
      },
      {
        title: '项目评级',
        dataIndex: 'level',
        key: 'level',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width:150,
        fixed: 'right',
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => this.modifyItem(record, {type1: 'modifyRecord4', type2: 'modalVisible4'})}>修改</a>
            <span className="ant-divider" />
            <a onClick={() => this.deleteItem(record, 'data4')}>删除</a>
          </span> 
        )
      },
    ];
    const columns5 = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        fixed: 'left',
        width: 100
      }, 
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 150
      }, 
      {
        title: '项目编号',
        dataIndex: 'projectOutCode',
        key: 'projectOutCode',
      }, 
      {
        title: '项目经理',
        dataIndex: 'manager',
        key: 'manager',
      }, 
      {
        title: '项目预计投入人力(应用研发)',
        dataIndex: 'appHrPlan',
        key: 'appHrPlan',
      }, 
      {
        title: '项目预计投入人力(系统研发)',
        dataIndex: 'sysHrPlan',
        key: 'sysHrPlan',
      }, 
      {
        title: '项目预计投入人力(QA)',
        dataIndex: 'qaHrPlan',
        key: 'qaHrPlan',
      }, 
      {
        title: '项目实际投入人力(应用研发)',
        dataIndex: 'appHrReal',
        key: 'appHrReal',
      }, 
      {
        title: '项目实际投入人力(系统研发)',
        dataIndex: 'sysHrReal',
        key: 'sysHrReal',
      }, 
      {
        title: '项目实际投入人力(QA)',
        dataIndex: 'qaHrReal',
        key: 'qaHrReal',
      }, 
      {
        title: '项目交付时间',
        dataIndex: 'deliveryDate',
        key: 'deliveryDate',
        render: (text, record) => (
          moment(record.deliveryDate).format('YYYY年MM月DD日')
        )
      }, 
      {
        title: '项目交付时效',
        dataIndex: 'delay',
        key: 'delay',
      }, 
      {
        title: '技术文档质量',
        dataIndex: 'docQuality',
        key: 'docQuality',
      },
      {
        title: '项目评级',
        dataIndex: 'level',
        key: 'level',
      },
      {
        title: '系统研发部评分',
        dataIndex: 'sysScore',
        key: 'sysScore',
      },
      {
        title: '应用研发部评分',
        dataIndex: 'applScore',
        key: 'applScore',
      },
      {
        title: 'QA测试部评分',
        dataIndex: 'qaScore',
        key: 'qaScore',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width:150,
        fixed: 'right',
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => this.modifyItem(record, {type1: 'modifyRecord5', type2: 'modalVisible5'})}>修改</a>
            <span className="ant-divider" />
            <a onClick={() => this.deleteItem(record, 'data5')}>删除</a>
          </span> 
        )
      },
    ];
    return (
      <section className="team-weekly">
        <Row gutter={100} className="input-row">
          <Col span={8} className="input-col">
            <span className="lable-span">部门：</span>
            <span>项目部</span>
          </Col>
          <Col span={8} className="input-col">
            <span className="lable-span">负责人：</span>
            <span>{this.state.userInfo.name}</span>
          </Col>
          <Col span={8} className="input-col">
            <span className="lable-span">时间：</span>
            <DatePicker onChange={this.dateChange} defaultValue={this.state.today} />
          </Col>
          <Col span={24} className="table-col">
            <Table title={()=> <span className="lable-span">{this.state.date.year}年{this.state.date.month}月第{this.state.date.week}周主要项目汇总-
            <a onClick={() => this.addData({type1: 'data1', type2: 'modifyRecord1', type3: 'modalVisible1', type4: 'index1'})}>添加数据</a></span>} 
            columns={columns1} dataSource={this.state.data1} scroll={{ x: 2200 }} />
          </Col>
          <Col span={24} className="table-col">
            <Table title={()=> <span className="lable-span">{this.state.date.year}年年度部门预研项目反馈汇总-
            <a onClick={() => this.addData({type1: 'data4', type2: 'modifyRecord4', type3: 'modalVisible4', type4: 'index4'})}>添加数据</a></span>} 
            columns={columns4} dataSource={this.state.data4} scroll={{ x: 3200 }} />
          </Col>
          <Col span={24} className="table-col">
            <Table title={()=> <span className="lable-span">{this.state.date.year}年年度部门产品项目反馈汇总-
            <a onClick={() => this.addData({type1: 'data5', type2: 'modifyRecord5', type3: 'modalVisible5', type4: 'index5'})}>添加数据</a></span>} 
            columns={columns5} dataSource={this.state.data5} scroll={{ x: 3200 }} />
          </Col>
          <Col span={24} className="table-col">
            <Table title={()=> <span className="lable-span">{this.state.date.year}年{this.state.date.month}月月度团队能力建设规划-
            <a onClick={() => this.addData({type1: 'data2', type2: 'modifyRecord2', type3: 'modalVisible2', type4: 'index2'})}>添加数据</a></span>} columns={columns2} dataSource={this.state.data2} />
          </Col>
          <Col span={24} className="table-col">
            <Table title={()=> <span className="lable-span">{this.state.date.year}年{this.state.date.month}月月度团队内部培训汇总-
            <a onClick={() => this.addData({type1: 'data3', type2: 'modifyRecord3', type3: 'modalVisible3', type4: 'index3'})}>添加数据</a></span>} columns={columns3} dataSource={this.state.data3} />
          </Col>
          <Col span={24} className="table-col button">
            {/* <Button type="primary">提交</Button> */}
            {
              this.props.viewFlag ? <Button type="primary" style={{marginLeft: 20}} onClick={this.props.viewBack}>返回</Button> : ''
            }
          </Col>
        </Row>
        <Modal
          title={this.state.modifyRecord1 === '' ? '添加数据' : '修改数据'}
          width={980}
          wrapClassName="vertical-center-modal"
          visible={this.state.modalVisible1}
          footer={null}
          closable={false}
        >
         {
          this.state.modalVisible1 ? 
          <WeeklyForm1 close={() => this.closeModal('modalVisible1')} submit={this.submitModalData} 
          index={this.state.index1} modifyRecord={this.state.modifyRecord1} managerList={this.state.managerList} departmentList={this.state.departmentList}></WeeklyForm1>
          : ""
        }
        </Modal>
        <Modal
          title={this.state.modifyRecord2 === '' ? '添加数据' : '修改数据'}
          width={980}
          wrapClassName="vertical-center-modal"
          visible={this.state.modalVisible2}
          footer={null}
          closable={false}
        >
         {
          this.state.modalVisible2 ? 
          <WeeklyForm2 close={() => this.closeModal('modalVisible2')} submit={this.submitModalData} 
          index={this.state.index2} modifyRecord={this.state.modifyRecord2}></WeeklyForm2>
          : ""
        }
        </Modal>
        <Modal
          title={this.state.modifyRecord3 === '' ? '添加数据' : '修改数据'}
          width={980}
          wrapClassName="vertical-center-modal"
          visible={this.state.modalVisible3}
          footer={null}
          closable={false}
        >
         {
          this.state.modalVisible3 ? 
          <WeeklyForm3 close={() => this.closeModal('modalVisible3')} submit={this.submitModalData} 
          index={this.state.index3} modifyRecord={this.state.modifyRecord3}></WeeklyForm3>
          : ""
        }
        </Modal>
        <Modal
          title={this.state.modifyRecord4 === '' ? '添加数据' : '修改数据'}
          width={980}
          wrapClassName="vertical-center-modal"
          visible={this.state.modalVisible4}
          footer={null}
          closable={false}
        >
         {
          this.state.modalVisible4 ? 
          <WeeklyForm4 close={() => this.closeModal('modalVisible4')} submit={this.submitModalData} 
          index={this.state.index4} modifyRecord={this.state.modifyRecord4} managerList={this.state.managerList}></WeeklyForm4>
          : ""
        }
        </Modal>
        <Modal
          title={this.state.modifyRecord5 === '' ? '添加数据' : '修改数据'}
          width={980}
          wrapClassName="vertical-center-modal"
          visible={this.state.modalVisible5}
          footer={null}
          closable={false}
        >
         {
          this.state.modalVisible5 ? 
          <WeeklyForm5 close={() => this.closeModal('modalVisible5')} submit={this.submitModalData} 
          index={this.state.index5} modifyRecord={this.state.modifyRecord5} managerList={this.state.managerList}></WeeklyForm5>
          : ""
        }
        </Modal>
      </section>
    )
  }
}
